<template>
	<view>
		<view class="item" style="padding: 20rpx 40rpx;">
			<u-form class="item" style="padding: 0 20rpx 0;" :model="clueInfo" ref="uform" label-width="auto">
				<u-form-item label="客户类型" label-width="200" :required="true" borderBottom>
					
					<u-radio-group
						v-model="customerTypeStr" @change="radioGroupChange">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 @change="radioChange"
						 shape="circle" v-for="(item, index) in radioList" :key="index" :label="item.name" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="客户名称" :required="true" borderBottom>
					<u-input v-model="clueInfo.customerName" border="none" inputAlign="right" placeholder="请输入客户名称">
					</u-input>
				</u-form-item>

				<u-form-item label="联系人" :required="true" v-if="showContact" borderBottom>
					<u-input v-model="clueInfo.contact" border="none" inputAlign="right" placeholder="请输入联系人">
					</u-input>
				</u-form-item>

				<u-form-item label="电话" :required="true" borderBottom>
					<u-input v-model="clueInfo.phone" type="number" maxlength="11" border="none" inputAlign="right" placeholder="请输入联系电话">
					</u-input>
				</u-form-item>

				<u-form-item label="线索描述" >
					<u-input v-model="clueInfo.cluesDescribe" border="none" inputAlign="right" placeholder="请输入线索描述"
						type="textarea">
					</u-input>
				</u-form-item>

			</u-form>


			<u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm"
				content="确定提交？" @cancel="showModal=false">
				<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
				<!-- #endif -->
			</u-modal>

		</view>
		<view class="button-container">
			<button class="btn-item" @click="commit">提 交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customerTypeStr: '个人',
				showContact: false,
				showModal: false,
				clueInfo: {
				 customerType: 1,
					customerName: '',
					phone: '',
					cluesDescribe: '',
				 operatorId: '',
					contact: ''

				},

				radioList: [{
						name: '个人',
						checked: true,
						disabled: false
					},
					{
						name: '企业',
						checked: false,
						disabled: false
					}
				]
			}
		},

		onLoad() {
			this.clueInfo.operatorId = this.$store.state.user.userInfo.userId;
		},

		methods: {
			// radio选择发生变化
			radioGroupChange(e) {
				console.log('radioGroupChange', e);
				
				if (e == "个人") {
					this.clueInfo.customerType = 1;
					this.showContact = false;
				} else {
					this.clueInfo.customerType = 2;
					this.showContact = true;
				}
				console.log(this.clueInfo.customerType);
			},
			
			radioChange(n) {
				// console.log('radioChange', n);
			},

			commit() {
				// this.showModal = true;
				
				this.confirm()
			},
			confirm() {
				let that = this
				
				if (this.$u.test.isEmpty(this.clueInfo.customerName)) {
					this.$u.toast('请输入客户名称');
					return;
				} else if (this.showContact && this.$u.test.isEmpty(this.clueInfo.contact)) {
					this.$u.toast('请输入联系人');
					return;
				} else if (this.$u.test.isEmpty(this.clueInfo.phone)) {
					this.$u.toast('请输入客户联系电话');
					return;
				} else {
					uni.showModal({
					    content: '确定提交吗?',
					    success(result) {
					       if (result.confirm) {

								that.$u.api.saveClues(that.clueInfo).then(
									res => {
										uni.$emit('refreshClueList', true)
										that.$u.toast('提交成功');
										setTimeout(()=>{
											uni.navigateBack();
										}, 1000)
									}
								);				

					       }
					    }
					})
					
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
